import React ,{FC} from 'react'
import {NavLink} from "react-router-dom"
import type {CSSProperties} from "react"
import {RouterList,RouterItem} from "../utils/index"

type Props = {
    mainRouter:RouterList
}
let activeStyle = {
    color:"green"
}
const My_nav:FC<Props> = ({mainRouter}) => {
  return (
    <div>
        {
            mainRouter.map((item:RouterItem,index:number) =>{
                return <NavLink 
                    style={({isActive})=>isActive?activeStyle:undefined}
                    key={index}
                    to={item.path}
                    >
                        {item.title}
                </NavLink>
            })
        }
    </div>
  )
}

export default My_nav